<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历：</title>
		<!-- 元素遍历： 用于DOM树种遍历元素【元素嵌套，父子级】 
		     children()     功能：获取匹配元素集合中每个元素的子元素
			 parent()       功能：获取匹配元素集合中每个元素的父元素
			 
			 siblings()     功能：获取匹配元素集合中每个元素的所有兄弟元素
			  
			 next()         功能：获取匹配元素集合中每个元素的下一个兄弟元素
			 prev()         功能：获取匹配元素集合中每个元素的上一个兄弟元素
			 
			 each()         功能：功能:遍历匹配元素的集合-- 
			                遍历所有子元素语法糖
			                语法糖:each(function(index,element){
								$(element)
								}）
								index: 下标  element: 元素  形参
			 -->
			 <style>
				 .container{
					 border: 1px solid #ff00ff;
					 padding: 10px;
					 margin: 10px;
				 }
				 .box{
					 background-color: #ff0000;
					 padding: 10px;
					 margin: 0.625rem;
				 }
				 button{
					 padding: 5px;
				 }
			 </style>
	</head>
	<script src="../js/jquery-1.11.1.js"></script>
	<body>
		<!-- html:   div.container  父级  6个div.box  每个#box1 子级 
		             6个按钮 
		css:         .container添加样式  边框1px，内外边距10px
		             .box添加样式         背景色，内外边距10px
					 button添加样式       外边距：5px
		jq：        引入    
					 -->
					 <div class="container">
		                       <div class="box" id="box1">盒子1</div>
		                       <div class="box" id="box2">盒子2</div>
		                       <div class="box" id="box3">盒子3</div>
		                       <div class="box" id="box4">盒子4</div>
		                       <div class="box" id="box5">盒子5</div>
		                       <div class="box" id="box6">盒子6</div>
		                        </div>
		                       <button id="gc">获取子元素</button>
		                       <button id="gp">获取父元素</button>
		                       <button id="gs">获取兄弟元素</button>
		                       <button id="gn">获取下一个兄弟元素</button>
		                       <button id="gr">获取上一个兄弟元素</button>
		                       <button id="loop">遍历元素</button>
		                  <script>
							  /* 1.点击  获取子元素  按钮  实现.container下所有子元素添加背景色 */
							  $("#gc").click(function(){
								  //通过 父找子  函数
								  $(".container").children().css("background-color","#ff0");
							  });
							  /*2.点击 获取父元素 按钮 实现.container 添加背景色*/
							  $("#gp").click(function(){
							 $("#box4").parent().css("background-color","#ff00ff");
							  });
							  /*3.点击  获取兄弟元素 按钮  实现出了 #box4 字体颜色不变，其他变色*/
							  $("#gs").click(function(){
							  $("#box4").siblings().css("background-color","#cc4545");
							   });
							  /*4.点击获取下一个兄弟元素 按钮 实现啊#box4 下一个兄弟，添加背景色*/
							  $("#gn").click(function(){
							  $("#box4").next().css("background-color","#aa51aa");
							   });
							  /*5.点击 获取上一个兄弟元素 按钮 实现#box6 上一个兄弟，添加效果
							                                           圆，背景图，背景色，盒子阴影
																		 */
								$("#gr").click(function(){
								$("#box6").prev().css({
									"width":"100px",
									"height":"100px",
									"background-color":"#ff0",
									"border-radius":"50%",
									"background-image":"url(../img/nailong.gif)",
									"box-shadow":"5px 5px 10px #ff0",
									"background-siaze":"100px 100px",
									"font-size":"0"
								});
								 });
								 /* 6.点击 遍历元素  按钮  实现每个盒子上，这是第几个盒子 */
								 $("#loop").click(function(){
									//通过 .box 抓到6个元素【一组集合】
									 $(".box").each(function(i,e){//e  代表元素     i 代表下标
										 //每个盒子加文字：这是第几个盒子
										 $(e).text(`这是第${i}盒子`);
									 });
								 });
								 /*
								 大作业：tab选项卡
								 BOM【了解】吸顶灯效果案例
								 小米页面效果
								 */
						  </script>
		 
		 
	</body>
</html>